<template>
  <div class="g2-page-view order-pay success">
    <div class="pay-container">
      <div class="pay-tips--image">
        <image src="/static/images/order/pay-success.png" alt />
      </div>
      <div class="pay-content">
        <div class="pay-content--info">订单支付成功</div>
        <div class="pay-content--price">{{ amount | currency_format('￥') }}</div>
        <!-- 课程类型的订单 -->
        <div class="pay-content--actions" v-if="orderType === 1">
          <div class="pay-content--btn" @click="handleClikGotoOrderDetail">查看订单</div>
          <div class="pay-content--btn" @click="handleClikGotoHome">再去看看</div>
        </div>
        <!-- VIP购买类型的订单 -->
        <div class="pay-content--actions" v-else>
          <div class="pay-content--btn" @click="handleClikGotoVIPDetail">查看会员</div>
          <div class="pay-content--btn" @click="handleClikGotoHome">返回首页</div>
        </div>
      </div>
    </div>

    <div class="pay-recommend">
      <div class="recommend--header">
        <span class="recommend--header--divider"></span>
        <span>为您推荐</span>
        <span class="recommend--header--divider"></span>
      </div>
      <div class="recommend-body">
        <div class="recommend-nodata">
          <image src="/static/images/order/pay-error.png" alt />
          <div class="recommend-nodata--tips">暂时还没有推荐哦~</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectOrderbyOrderNoAPI } from "api/order/order.js";
export default {
  name: "paySuccess",
  data() {
    return {
      orderNo: "",
      amount: "",
      // 订单的类型 1: 课程 2：会员 3：专属
      orderType: 1,
      orderId: "",
      // 课程ID
      lessonId: ""
    };
  },
  onLoad(e) {
    this.orderNo = e.orderNo;
    if (this.orderNo) {
      this.loadOrderBasicInfoByOrderNo();
    }

    console.log(this.orderNo);
  },
  mounted() {},
  methods: {
    /**
     * 初始化加载订单的基本信息
     */
    loadOrderBasicInfoByOrderNo() {
      var self = this;

      var params = {
        orderNo: this.orderNo
      };
      console.log(params);
      selectOrderbyOrderNoAPI(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          this.$toast.fail(respMsg);
        }
        this.amount = result.amount;
        this.orderType = result.orderType;
        this.orderId = result.orderId;
        this.lessonId = result.lessonId;
      });
    },
    /**
     * 点击跳转到订单详情页
     */
    handleClikGotoOrderDetail() {
      this.$router.push({
        path: `/my/orderdetail`,
        query: {
          sid: this.$route.query.sid,
          orderId: this.orderId,
          lessonId: this.lessonId
        }
      });
    },
    /**
     * 点击
     * 跳转到首恶
     */
    handleClikGotoHome() {
      this.$router.push({
        path: `/home`,
        query: {
          sid: this.$route.query.sid
        }
      });
    },

    /**
     * 点击
     * 跳转到会员详情页
     */
    handleClikGotoVIPDetail() {
      this.$router.push({
        path: `/my/subscriber`,
        query: {
          sid: this.$route.query.sid
        }
      });
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
